@use 'theme';
@use 'api';
@use 'legacy';
/*
    Global Mixins
*/

/*
    Mixin that returns a property map as a series of CSS class properties.

    E.g. $xs: (color: #fff, opacity: 0.5), $sm... =>

    <class>--xs {
        color: #fff;
        opacity: 0.5;
    }
*/
@mixin explode-properties($property-map, $suffix: '') {
    @each $property, $value in $property-map {
        #{$property}: #{$value} #{$suffix};
    }
}

@mixin input-success {
    border-color: api.fill('success');

    &:focus {
        box-shadow: 0 0 0 0.2rem legacy.transparentize(api.fill('success'), theme.$focus-opacity),
            inset 0px 1px 8px rgba(0, 0, 0, 0.07);
    }
}

@mixin input-error {
    border-color: api.fill('danger');

    &:focus {
        box-shadow: 0 0 0 0.2rem legacy.transparentize(api.fill('danger'), theme.$focus-opacity),
            inset 0px 1px 8px rgba(0, 0, 0, 0.07);
    }
}

/*
    Bring to front on focus.
*/
@mixin elevate-on-focus {
    &:focus {
        z-index: 1;
    }
}